<template>
  <div class="page-content">
    <div class="comm-content" ref="main"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myEcharts: null,
    };
  },
  methods: {
    screen() {
      this.myEcharts.resize();
      let width = this.$refs.main.offsetWidth;
      let num = (width / 100) * 5;
      let options = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
      };
      this.myEcharts.setOption(options);
    },
    initEcharts() {
      let main = this.$refs.main;
      this.myEcharts = this.$echarts.init(main,this.themeStatus);

      /** @type EChartsOption*/
      let options = {
        title: {
          text: "主要地区农作物种植增长优势",
        },
        xAxis: {
          type: "category",
          // data:['一月','二月','三月'],
          boundaryGap: false, // 两边的留白策略
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        legend: {
          show: true,
          icon: "circle",
          left: 5,
          top: "10%",
        },
        series: [
          {
            type: "line",
            // data:[100,300,200,400],
            smooth: true, // 是否开启平滑
          },
        ],
      };
      this.myEcharts.setOption(options);
    },
    async getData() {
      let dataList = await this.$http("/api/CropGrowthTrend");
      console.log(dataList);
      let monthData = dataList.data[0].content.map((item) => {
        return item.month;
      });
      // console.log(monthData);
      let seriesData = dataList.data.map((item) => {
        let data1 = item.content.map((item1) => {
          return item1.area;
        });
        return {
          type: "line",
          name: item.city,
          data: data1,
          smooth: true, // 是否开启平滑处理
        };
      });
      this.setEcharts(monthData, seriesData);
    },
    setEcharts(monthData, seriesData) {
      let options = {
        xAxis: {
          data: monthData,
        },
        series: seriesData,
      };
      this.myEcharts.setOption(options);
    },
  },
  mounted() {
    this.initEcharts();
    this.getData();
    this.screen();
    window.addEventListener("resize", this.screen);
  },
  watch: {
    themeStatus() {
      this.myEcharts.dispose();
      this.initEcharts();
      this.getData();
      this.screen();
    },
  },
  computed: {
    // 计算属性
    themeStatus() {
      return this.$store.state.theme;
    },
  },
  filters: {},
  components: {},
};
</script>
<style scoped></style>
